<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="/css/start/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.21.custom.min.js"></script>
<style type="text/css">
.hasTooltip {
    position:relative;
}
.hasTooltip span {
    display:none;
}

.hasTooltip:hover span {
    display:block;
    background-color:#888;
    border-radius:1px;
    color:white;
    box-shadow:1px 1px 2px gray;
    position:absolute;
    padding:5px;
    top:0px;
    left:45px;   
    width:250px; /* I don't want the width to be too large... */
	/*white-space: nowrap; */
}	
</style>
</head>

<body style="font-family:Arial, Helvetica, sans-serif">
<script>
	$(function() {
		$( "#date_begin" ).datepicker({ dateFormat: "yy-mm-dd",firstDay: 1 ,beforeShowDay: function(date){ return [date.getDay() == 1,""]}});
		$( "#date_end" ).datepicker({ dateFormat: "yy-mm-dd",firstDay: 1 });
	});
	</script>
<form action="" method="post">
  <p>
     
  Date Begin [yyyy-mm-dd]:
    <input name="date_begin" id="date_begin" type="text" />  Date End:<input name="date_end" id="date_end" type="text" /> |  <input type="submit" name="button" id="button" value="Submit" />
  </p>
</form>
</body>
</html>